<template>
  <section class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">订单ID：{{orderInfo.rechargeOrderId || '--'}}</span>
    </div>

    <div class="f-card">
      <ul class="f-ul">
        <li>
          <p>下单时间：</p>
          <p>{{ getDateTime(orderInfo.createTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>订单状态：</p>
          <p>{{ chargesStatus[orderInfo.chargesStatus] || '--'}}</p>
        </li>
        <li>
          <p>关联商户：</p>
          <p>{{orderInfo.shopName || '--'}}</p>
        </li>
        <li>
          <p>代理商：</p>
          <p>{{orderInfo.agent || '--'}}</p>
        </li>
        <li>
          <p>支付金额：</p>
          <p style="color:#F60000">¥ {{orderInfo.money/100 || '--'}}</p>
        </li>
        <li>
          <p>支付渠道：</p>
          <p>{{orderInfo.payChannel || '--'}}</p>
        </li>
        <li>
          <p>支付方式：</p>
          <p>{{orderInfo.payWay || '--'}}</p>
        </li>
        <li>
          <p>支付时间：</p>
          <p>{{ getDateTime(orderInfo.payTime)[6] || '--'}}</p>
        </li>
      </ul>
    </div>
    <div class="f-card">
      <p class="f-title">套餐/套餐信息</p>
      <ul class="f-ul">
        <li>
          <p>用户码：</p>
          <p>{{orderInfo.userCode || '--'}}</p>
        </li>
        <li>
          <p>套餐：</p>
          <p>{{orderInfo.packageProduct || '--'}}</p>
        </li>
        <li>
          <p>套餐类别：</p>
          <p>{{orderInfo.packageInfo || '--'}}</p>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from '../api.js'

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      searchForm: {
        "chargesStatus": "",
        "orderBy": "",
        "packageProductIds": [],
        "rechargeOrderId": route.query.rechargeOrderId,
        "userCode": ""
      },

      orderInfo: {},
      chargesStatus: {
        '1': '待处理',
        '2': '佣金已退',
        '3': '无需退佣金',
        '4': '退佣金失败',
      },
    })

    onMounted(() => {
      getTableData()
    })

    function getTableData() {
      const obj = {
        page: 1,
        size: 10,
        ...state.searchForm,
        createTimeMin: (state.searchForm.date && state.searchForm.date[0]) || '',
        createTimeMax: (state.searchForm.date && state.searchForm.date[1]) || '',
      }
      api.orderRechargeRefund(obj).then(res => {
        state.orderInfo = res.data.list[0]
      }).catch(err => {
        console.log(err)
      })
    }

    return {
      ...toRefs(state),
      getDateTime
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  > .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 85px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
    .f-goods-box {
      display: flex;
      align-items: center;
      .f-goods {
        width: 50%;
        .f-goods-card {
          width: 448px;
          padding: 8px 10px;
          background: #ffffff;
          display: flex;
          img {
            width: 152px;
            height: 84px;
            margin-right: 15px;
          }
          .f-desc-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .f-desc-name {
              font-weight: 600;
              font-size: 16px;
              color: #010101;
            }
            .f-desc-price {
              font-weight: 400;
              font-size: 20px;
              color: #f60000;
            }
            .f-desc-price-1 {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-decoration-line: line-through;
              margin-left: 10px;
            }
          }
        }
      }
      .f-goods-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
</style>